<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .wrapper{
            position: relative;
            width: 250px;
            height: 10px;
            margin: 50px;
            background-color: lightgreen;
            cursor: pointer;
        }
        .line{
            width: 0;
            height: 10px;
            background-color: green;
        }
        /* 伪元素当做line的子元素来看 */
        /* 放大触控空间 */
        .line::after{
            position: absolute;
            top: -25px;
            left: -50px;
            width: 350px;
            height: 60px;
            content: '';
            
        }
    </style>
</head>
<body>
    <audio src="../image/HC/小手拍拍.mp3" controls></audio>
    <video src="../image/HC/movie.ogg" controls></video>
    <br>
    <button class="btn">开始播放</button>
    <button class="btn">暂停</button>
    <button class="btn">重新加载</button>
    <button class="btn">一个按钮控制播放暂停</button>
    <button class="btn">时间进度：</button>
    <button class="btn">设置当前音量为50%</button>
    <div class="wrapper">
        <div class="line"></div>
    </div>

    <script>
        /*
            currentTime 视频播放的当前进度
            duration 视频的总时间   进入页面音视频加载需要时间，因此不能直接获取总时长  以秒显示的
            paused 视频播放是否是暂停
            volume  控制声音 0-1
            
            load() 重新加载音频/视频元素
            play() 播放
            pause() 暂停
            
            oncanplay: 事件在用户可以开始播放视频/音频（audio/video）时触发。
            ontimeupdate: 通过该事件来报告当前的播放进度.
            onended: 播放完时触发
        */

        var btns = document.querySelectorAll('.btn');
        var ad = document.querySelector('audio');
        // 进入页面音视频加载需要时间，因此不能直接获取总时长
        // console.log(ad.duration);
        var vd = document.querySelector('video');
        var line = document.querySelector('.line');
        var wrapper = document.querySelector('.wrapper');
        var adDuration;
        // 开始播放
        btns[0].onclick = function () {
            ad.play()
        }
        // 暂停
        btns[1].onclick = function () {
            ad.pause()
        }
        // 重新加载
        btns[2].onclick = function () {
            ad.load()
        }
        // 一个按钮控制播放暂停
        btns[3].onclick = function () {
            if (ad.paused) {
                ad.play()
            } else {
                ad.pause()
            }
        }
        // 当前播放时长
        btns[4].onclick = function () {
            console.log('当前播放时间：', ad.currentTime);
            console.log('当前视频播放状态', ad.paused);
        }
        // 设置音量为50%
        btns[5].onclick = function () {
            ad.volume = .5;
        }

        //时间进度
        ad.oncanplay = function () {
            adDuration = this.duration;
        }
        // 时间进度
        ad.ontimeupdate = function () {
            var time = ad.currentTime;
            var minute = Math.floor(adDuration%3600/60);
            var second = Math.floor(adDuration%60);
            var currentM = Math.floor(time%3600/60);
            var currentS = Math.floor(time%60);
            btns[4].innerHTML = '时间进度：' + currentM + ':' + (currentS > 9 ? currentS : ('0' + currentS)) + '/' + minute + ':' + (second > 9 ? second : ('0' + second));
        }

        // 进度条
        wrapper.onmousedown = function () {
            this.onmousemove = function () {
                var current = event.pageX - wrapper.offsetLeft;
                if (current > 250) {
                    current = 250
                }
                line.style.width = current + 'px';
                // 音频进度条联动
                ad.currentTime = ad.duration * (current/250);
            }
            this.onmouseup = function () {
                this.onmousemove = null;
            }
        }
    </script>
</body>
</html>